import React, {useState,useEffect } from 'react';
import Table from '../../../components/packagingPopup/LmdTable';
import '../../../scss/lmd/WarehousingManagement.scss'
import { Button, Form, Input, Select,message,DatePicker, Space, Modal} from 'antd';
import { SearchOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { warehousingmanagement_table,warehousingmanagement_search,warehousingmanagement_add } from '../../../tools/api';


function WarehousingManagement(props) {
    // 定义单选框数组，日期，表格数据，
    var [SelectChange,setSelectChange]=useState([])
    var [dateString,setdateString]=useState([])
    var [dataSource,setdataSource]=useState([]); 
    var [loading,setloading]=useState(false); 
    const [messageApi, contextHolder] = message.useMessage();
    const [isModalOpen, setIsModalOpen] = useState(false);

    const { Option } = Select;

    const success = () => {
        messageApi.open({
          type: 'success',
          content: 'This is a success message',
        });
      };

    //表单数据过滤
    const onFinish = (value) => {
        setloading(true);
        setTimeout(() => {
            setloading(false)
        }, 500);
        if(dateString){
            value.dateString=dateString;
        }
        if(value!==[]){
             warehousingmanagement_search({status_like:value.status,supplier_like:value.supplier,dateString_like:value.dateString,purchase_like:value.purchase}).then((res)=>{
                setdataSource(res.data)
            })
        
        }
    };
    // 表格数据初始化
    useEffect(()=>{
        datasource();
    },[])
    var datasource=()=>{
        warehousingmanagement_table().then((res)=>{
            setdataSource(res.data)
        })
    }
    // 日期变动存储
    const onChange = (date, dateString) => {
        setdateString(dateString)
    };

    // 单选框
    const getonSelectChange = (SelectChange) => {
        setSelectChange(SelectChange)
    };

    // 新增数据（对话框）
    const showModal = () => {
      setIsModalOpen(true);
    };
  
    const onFinish1 = (value) => {
        value.dateString=dateString;
        value.status='待入库';
        value.key=String(dataSource.length+1) ;
        value.id=String(dataSource.length+1) ;
        warehousingmanagement_add(value).then((res)=>{
            setIsModalOpen(false);
            datasource();
            success("新增成功")
            setloading(true);
            setTimeout(() => {
                setloading(false)
            }, 500);
        })
    };
  
    const handleCancel = () => {
      setIsModalOpen(false);
    };
    


    return (
        <div id='warehousingmanagement'>
            {contextHolder}
            <div className='warehousingmanagementsearch'>
                <Form  className='form' initialValues={{ remember: true }} onFinish={onFinish}>
                    <Form.Item className='item' label="入库状态" name="status" >
                        <Select
                            placeholder="全部"
                            style={{ width: 120 }}
                        >
                            <Option value="">全部</Option>
                            <Option value="待入库">待入库</Option>
                            <Option value="待确认">待确认</Option>
                            <Option value="已入库">已入库</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item className='item' label="创建日期">
                        <Space direction="vertical">
                            <DatePicker onChange={onChange} placeholder='请输入创建时间' />
                        </Space>
                    </Form.Item>
                    <Form.Item className='item' label="供应商编号" name="supplier" >
                        <Input placeholder='请输入供应商姓名' />
                    </Form.Item>
                    <Form.Item className='item' label="采购单编号" name="purchase">
                        <Input placeholder='请输入采购单编号' />
                    </Form.Item>
                    <Button className='btn' type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={onFinish}>搜索</Button>
                    <Button className='btn' type="primary"  icon={<PlusCircleOutlined />} style={{background:'#0077ff'}} onClick={showModal}>添加</Button>
                </Form>
            </div>


            <Table loading={loading} dataSource={dataSource} status={1} getOnSelectChange={getonSelectChange} datasource={datasource}/>

            {/* 新增 */}
            <Modal title="Basic Modal" open={isModalOpen}   footer={[]}>
            <Form
                name="basic"
                className='basic'
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                initialValues={{ remember: true }}
                onFinish={onFinish1}
                >
                    <div className='zhan' style={{height:20}}></div>

                <Form.Item
                    name="dateString"
                    label='入库日期'
                >
                    <Space direction="vertical">
                        <DatePicker onChange={onChange} placeholder='请输入创建时间' />
                    </Space>
                </Form.Item>
                <Form.Item
                    name="number"
                    label='入库单编号'
                    rules={[{ required: true, message: '入库单编号不能为空' }]}
                >
                    <Input placeholder='请输入入库日期' />
                </Form.Item>
                <Form.Item
                    name="purchase"
                    label='采购单编号'
                    rules={[{ required: true, message: '采购单编号不能为空' }]}
                >
                    <Input placeholder='请输入采购单编号' />
                </Form.Item>
                <Form.Item
                    name="type"
                    label='入库类型'
                    rules={[{ required: true, message: '入库类型不能为空' }]}
                >
                    <Input placeholder='请输入入库类型' />
                </Form.Item>
                <Form.Item
                    name="supplier"
                    label='供应商编号'
                    rules={[{ required: true, message: '供应商编号不能为空' }]}
                >
                    <Input placeholder='请输入供应商编号' />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
                    <Button type="primary" htmlType="submit" onClick={onFinish1} style={{marginRight:20+'px'}}>
                        确认新增
                    </Button>
                    <Button onClick={handleCancel} style={{marginLeft:20+'px'}}>
                        取消
                    </Button>
                </Form.Item>
            </Form>
            </Modal>
        </div>
    );
}

export default WarehousingManagement;